<template>
  <div class="goodview-container">
    <div class="banner">
      <img :src="info.list_pic_url" alt="" />
    </div>
    <p class="title">{{ info.name }}</p>
    <p class="brief">{{ info.goods_brief }}</p>
  </div>
</template>

<script>
export default {
  props: ["info"],
};
</script>

<style scoped lang='scss'>
.goodview-container {
  width: 269px;
  .banner {
    height: 254px;
    width: 254px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brief {
    font-size: 24px;
    color: #999999;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>